<template>
    <div class="out">
        <div class="backgroundImageOut">
        </div>

        <div class="titleOut">
            <div class="title">
                数字商铺
            </div>
        </div>

        <div class="submitForm">
            <div class="submitTitle">
                登录
                <div class="navToArea">
                    <div class="navToText" @click="youKeLogin">游客登录</div>
                </div>
            </div>
            <div class="formItem">
                <div class="topTip">姓名</div>
                <input class="rightInput" type="text" placeholder="请输入姓名" @input="nameInputHandler"/>
            </div>
            <div style="height: 30px;"></div>
            <div class="formItem">
                <div class="topTip">手机号</div>
                <input class="rightInput" type="text" placeholder="请输入手机号" @input="loginNameInputHandler"/>
            </div>
            <div style="height: 20px;"></div>
        </div>
        <div class="buttonArea">
            <van-button type="primary" :disabled="ifDisabledLoginBtn" block @click="loginHandler">登录</van-button>
        </div>
    </div>
</template>

<script setup>
import { loginBind, loginYouKe } from '@/api/system/use/index.js'    
import { pageConstant } from '@/config/contant.js'
import { store } from 'xijs';
import { useRouter } from 'vue-router'
const router = useRouter()

const ifDisabledLoginBtn = ref(true)
let userRealName = ''
let loginName = ''
const changeLoginBtnHandler = () => {
    let tmp = userRealName && loginName && userRealName.length >= 2 && loginName.length >= 2

    ifDisabledLoginBtn.value = !tmp
}
const nameInputHandler = (e) => {
    userRealName = e.target.value

    changeLoginBtnHandler()
}
const loginNameInputHandler = (e) => {
    loginName = e.target.value

    changeLoginBtnHandler()
}
const loginHandler = () => {
    let params = {
        userName: userRealName,
        loginName: loginName
    }

    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        duration: 0
    });

    loginBind(params).then(res => {
        // 关闭加载中提示
        closeToast();

        if (res.data.code == pageConstant.okCode) {
            const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000;

            store.set(pageConstant.storageSyncUserKey, JSON.stringify(res.data.data), Date.now() + oneWeekInMilliseconds)
            router.replace({
                path: '/home'
            })
        } else {
            showToast(res.data.msg);
        }
    })
    .catch((err) => {
        console.log(err)
    })
}

const openYouKeLoginDialogHandler = () => {
    showConfirmDialog({
        title: '确认',
        message:'确认要用游客身份登录吗？',
    }).then(() => {
        youKeLogin()
    }).catch(() => {
        // on cancel
    });
}
const youKeLogin = () => {
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        duration: 0
    });

    loginYouKe({}).then(res => {
        // 关闭加载中提示
        closeToast();

        if (res.data.code == pageConstant.okCode) {
            const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000;

            store.set(pageConstant.storageSyncUserKey, JSON.stringify(res.data.data), Date.now() + oneWeekInMilliseconds)
            router.replace({
                path: '/home'
            })
        } else {
            showToast(res.data.msg);
        }
    })
    .catch((err) => {
        console.log(err)
    })
}
</script>

<style scoped>
.out {
    height: 100dvh;
    padding: 0 20px;
    position: relative;

    .backgroundImageOut {
        position: absolute;
        left: 0;
        z-index: -1;

        width: 400px;
        height: 330px;
        background: url("/src/assets/img/back1.jpg") center;
        background-size: cover;
        border-radius: 0 0 20px 20px;
        opacity: 0.5;
    }

    .titleOut {
        height: 240px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .title {

            /* background-color: #fff; */
            font-size: 40px;
            font-weight: 700;
            letter-spacing: 1px;
            color: #187eff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            letter-spacing: 2px;
        }
    }

    .submitForm {
        background-color: #fff;
        padding: 15px;
        box-shadow: 0 0 5px rgba(26, 125, 255, 0.5);
        border-radius: 10px;

        .submitTitle {
            font-size: 21px;
            font-weight: 600;
            padding: 10px 0 40px;
            display: flex;
            justify-content: space-between;

            .navToArea {
                font-size: 15px;
                display: flex;
                font-weight: 500;

                .navToText {
                    color: #187eff;
                    border-radius: 5px;
                }
            }
        }
        
        .formItem {
            padding-bottom: 15px;
            /* display: flex; */
            border-bottom: 1px solid #f1f1f1;

            .topTip {
                padding-bottom: 20px;
                padding-left: 2px;
            }

            .rightInput {
                border: 0;
                font-size: 17px;
            }
        }
    }

    .buttonArea {
        padding-top: 30px;
    }
}
</style>